<template>
	
	<span class="btn">
		<el-button type="warning" plain :icon="TouSu" @click="add" style="margin-bottom: 10px;margin-top: 10px; width:100%;">增加投诉事项</el-button>
	</span>
	
	<div>
		<el-dialog v-model="dialog.show" :title="dialog.title"  width="480px"  :close-on-click-modal="false">
			<div><Add v-if="dialog.show" 
			v-model:show="dialog.show"
			@getTableData="getTableData"
			:id="dialog.id"/></div>
		</el-dialog>
		  <el-table
		    :data="tableData.records" 
		    border
		    style="width: 100%">
			 <el-table-column label="我的提交记录" align="center" >
			 <el-table-column prop="createTime" label="提交时间" align="center" width="180">
			 </el-table-column>
		    <el-table-column prop="type" label="投诉类别" align="center" width="180"
                         :filters="[{
                          text: '社区安全类', value: '社区安全类' },
                          { text: '环境秩序类', value: '环境秩序类' },
                          { text: '邻里关系类',value: '邻里关系类'},
                          { text: '服务质量类',value: '服务质量类'},
                          { text: '规则执行类',value: '规则执行类'},
                          { text: '文化冲突类',value: '文化冲突类'} ]"
                         column-key="type"
                         :filter-method="filterHandler"
        >
		    </el-table-column>
			<el-table-column prop="content" label="具体描述" align="center" show-overflow-tooltip>
			</el-table-column>
		    <el-table-column prop="status"label="处理结果" width="170"
		    align="center"
                         :filters="[{
                          text: '待审核', value: 0 },
                          { text: '已通过', value: 1 },
                          { text: '被撤回',value: 3 },
                          { text: '被驳回',value: 2 }
                        ]"
                         column-key="status"
                         :filter-method="filterHandler">
		    	<template #default="scope">
		    	    <el-tag type="primary" v-if="scope.row.status === 0">待审核</el-tag>
		    	    <el-tag type="success" v-else-if="scope.row.status === 1">已通过</el-tag>
					<el-tag type="danger" v-else-if="scope.row.status === 3">被撤回</el-tag>
					<el-tag type="info" v-else="scope.row.status === 2">被驳回</el-tag>
		    	</template>
		    </el-table-column>
			<el-table-column label="操作" width="190" align="center">
			 <template #default="scope">
			    <el-button type="danger" plain size="small" v-if="scope.row.status === 0" @click="del(scope.row.id,3)">撤回</el-button>
				 <el-button type="warning" plain size="small" v-if="scope.row.status === 0" @click="update(scope.row.id)">修改</el-button>
			     <el-tag type="success" plain  v-else-if="scope.row.status === 1">已通过，无操作</el-tag>
				 <el-tag type="info" plain v-else-if ="scope.row.status===3">被撤回，禁止操作</el-tag>
				 <el-tag type="info" plain v-else ="scope.row.status===2">被驳回</el-tag>
			  </template>
			</el-table-column>
			</el-table-column>
		</el-table>
		<el-pagination
		background
		:page-count="tableData.pages"
		v-model:current-page="params.page"
		:total="tableData.total"
		:close-on-click-modal="false"
		@current-change="getTableData()"
		style="margin-top:15px;"></el-pagination>
	</div>
</template>

<script setup>
	import TouSu from '@/views/service/components/icon/tousu'
	import { ref,reactive,computed } from 'vue'
	import { getCookieForObject} from '@/util';
	import Add from './add'
	import { get, post } from '@/plugins/axios'
	import {_axios} from '@/plugins/axios'
	const totalItems = computed(() => main.tableData.length);
	const dialog = reactive({
		show: false,
		title: '',
		id: null
	})
	const tableData = reactive({
	  records: [] ,// 初始化为空数组
	  pages: 0,
	  total: 0
	});
	const params = reactive({
	    page: 1,
	    limit: 10
	})
	function getUserId(){
	 const userinfo= getCookieForObject('user')
	    return userinfo.id
	}
	const userId=getUserId()
	getTableData()
function getTableData(){
	post('/complaint/llist',{userId:userId,pageNo:params.page, pageSize:params.limit },content=>{
			tableData.records = content.records
		    tableData.pages = content.pages
		    tableData.total = content.total			
			})
	}
	function add()
	{
		dialog.title='添加投诉事项'
		dialog.id=null
		dialog.show=true
	}
	function update(id)
	{
		dialog.title='修改投诉事项'
		dialog.id=id
		dialog.show=true
	}
	function del(id,status)
	{
		ElMessageBox.confirm('确定撤回该投诉记录吗？撤销后不可修复','警告',{
			type:'warning',
			confirmButtonText: '确定',
			  cancelButtonText: '取消',
		}).then(()=>{
			post('/complaint/del',{id,status},content=>{
				getTableData()
			},)
		}).catch(()=>{})
	}
  function filterHandler(value, row, column) {
    const property = column['property'];
    if (property === 'status') {
      return row.status === value;
    } else if (property === 'type') {
      return row.type === value;
    }
    return false;
  }
</script>

<style scoped lang="scss">
</style>